/**
 * 管理系统登录页
 */
import { defineComponent, ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { SetCookieTOOL } from '@utils/index';
import { ElMessage } from 'element-plus';
import { LoginAdminAPI } from '@service/api/LoginAPI';
import './style.scss';

export default defineComponent({
  name: 'Login',
  setup: () => {
    const router = useRouter();
    const fromRef: any = ref(null);
    const loading = ref(false);
    const userForm = reactive({
      name: '',
      psd: '',
    });

    const submitForm = () => {
      loading.value = true;
      fromRef.value.validate(async (valid) => {
        SetCookieTOOL('adminName', userForm.name, 30);
        if (valid) {
          const res = await LoginAdminAPI({
            account: userForm.name,
            password: userForm.psd,
          });
          if (res) {
            SetCookieTOOL('userAdmin', res, 30);
            router.push({
              path: '/admin',
            });
          } else {
            ElMessage({
              type: 'error',
              message: '账号或密码错误',
              duration: 3000,
              customClass: 'errorLog',
              center: true,
            });
          }
          loading.value = false;
        }
      });
    };

    return () => (
      <div class="login" v-loading={loading.value} element-loading-background="rgba(0, 0, 0, 0.8)">
        <div class="login_from_dailog"></div>
        <div class="login_from">
          <header class="login_navigator">
            <div class="logo">后台管理</div>
          </header>
          <el-form
            ref={(vn) => {
              fromRef.value = vn;
            }}
            model={userForm}
            label-width="0px"
          >
            <el-form-item>
              <el-input
                modelValue={userForm.name}
                placeholder="用户名"
                onInput={(e) => {
                  userForm.name = e;
                }}
                onKeyup={(e) => {
                  if (e.key === 'Enter') {
                    submitForm();
                  }
                }}
              >
                {{
                  prefix: () => (
                    <div class="input_header">
                      <img src={require('@assets/icon_login_user.svg')} />
                    </div>
                  ),
                }}
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-input
                modelValue={userForm.psd}
                placeholder="密码"
                type="password"
                onInput={(e) => {
                  userForm.psd = e;
                }}
                onKeyup={(e) => {
                  if (e.key === 'Enter') {
                    submitForm();
                  }
                }}
              >
                {{
                  prefix: () => (
                    <div class="input_header">
                      <img src={require('@assets/icon_login_psd.svg')} alt="" />
                    </div>
                  ),
                }}
              </el-input>
            </el-form-item>
            <div class="login_button" onClick={submitForm}>
              登录
            </div>
          </el-form>
        </div>
      </div>
    );
  },
});
